@use "sass:color";
@charset "UTF-8";
// Copyright (C) 2019 Checkmk GmbH - License: GNU General Public License v2
// This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
// conditions defined in the file COPYING, which is part of this source code package.

// Note: Some of the colors defined here are also used in cmk/gui/plugins/metrics/utils.py, do not
// change one without the other.
@import "../colors.scss";
// -----------------------------------------------------------------------------
// Colors
// -----------------------------------------------------------------------------
$yellow: rgb(255, 208, 0); // yellow

// Helper variables for this theme that should be used in all color definitions below
$ux-theme-0: rgb(249, 249, 255); // v = 100
$ux-theme-1: rgb(245, 245, 251); // v = 98.54
$ux-theme-2: rgb(239, 239, 245); // v = 96
$ux-theme-3: rgb(235, 235, 241); // v = 94.5
$ux-theme-4: rgb(232, 232, 238); // v = 93.3
$ux-theme-5: rgb(224, 224, 228); // v = 90.1
$ux-theme-6: rgb(204, 207, 219);

// UX colors
$navbar-color: $ux-theme-2;
$bg-color: $ux-theme-0;
$bg-color-secondary: $ux-theme-1;
$base-color: $ux-theme-1;
$headline-color: $ux-theme-4;
$table-highlight-color: $ux-theme-5;
$line-color: $ux-theme-5;

// -----------------------------------------------------------------------------
// Fonts
// -----------------------------------------------------------------------------
$font-color: $grey-4;
$font-color-dimmed: rgba($grey-4, 0.8);
$font-color-light-bg: $grey-4;
$font-color-light-grey: $grey-1;
$font-color-green: $success-dimmed-2;
$font-color-orange: $orange-2;

// -----------------------------------------------------------------------------
// Form elements (input, textarea, button, etc.)
// -----------------------------------------------------------------------------
$default-button-border-color: rgb(183, 180, 180);
$default-submit-button-border-color: $success-dimmed;

$input-background-color: $ux-theme-5;
$input-hover-bg-color: $ux-theme-4;
$input-nested-background-color: $ux-theme-3;
$input-dropdown-border-color: $ux-theme-6;

// -----------------------------------------------------------------------------
// States
// -----------------------------------------------------------------------------
$color-state-1-background: $yellow;
$color-state-2-background: rgb(232, 85, 85);
$color-state-3-background: rgb(252, 185, 123);
$color-state-4-background: $middarkgrey;
$color-state-5-background: rgb(72, 203, 240);
$color-state-6-background: rgb(185, 236, 250);
$color-state-7-background: rgb(233, 128, 110);
$color-state-8-background: rgb(241, 174, 162);
$color-state-9-background: rgb(191, 90, 191);
$color-state-success-background: $success; // green
$color-state-running-background: $hostdown;

// -----------------------------------------------------------------------------
// Tables
// -----------------------------------------------------------------------------
$color-table-border: $ux-theme-6;
$color-table-background: $grey-1;
$color-table-border-dark: rgb(13, 15, 15); // dark grey

// -----------------------------------------------------------------------------
// Temporary variables for implementing the dark theme
// These should be put into a more intuitive naming structure afterwards.
// -----------------------------------------------------------------------------
$dashboard-stats-bg-color: $white;

$data-container-bg-color: null;

$input-button-bg-color: $ux-theme-5;
$input-button-hover-bg-color: $ux-theme-5;

$odd-tr-bg-color: $ux-theme-3;
$even-tr-bg-color: $ux-theme-1;

$floatfilter-bg-color: rgba($white, 0.2);

$dashlet-body-bg-color: $ux-theme-1;

$td-gap-bg-color: $ux-theme-0;

$td-text-overflow: null;

$graph-legend-th-border-bottom: null;

$dashlet-stats-border-top-color: $ux-theme-6;

$overview-info-bg: rgb(191, 194, 217);

$wato-a-border: null;

$host-diag-success-bg-color: rgb(238, 255, 238);
$input-error-bg-color: $red-1;

$hot-bg-color: $orange-1;

$data-th-sort-hover-bg-color: inherit;

$h3-margin-bottom: 1px;

$wato-info-margin: null;
$wato-info-padding: null;

$repprogress-progress-bg-color: rgb(185, 236, 250);

$iconbutton-filter: invert(0%);

$popup-menu-select-bg-color: $white;

$dragging-bg-color: $grey-1;

$nested-table-th-bg-color: $ux-theme-4;
$nested-table-td-bg-color: $white;
$nested-table-td-inactive-bg-color: $ux-theme-0;

$duallist-control-a-hover-bg-color: $grey-1;

$performance-table-shared-padding: 8px;

// -----------------------------------------------------------------------------
// Tags
// -----------------------------------------------------------------------------
$tag-opacity: 1;
$tag-discovered-opacity: 1;
$tag-hover-opacity: 0.5;

// -----------------------------------------------------------------------------
// Node visualization
// -----------------------------------------------------------------------------
$node-vis-darkgrey: $ux-theme-5;
$node-vis-menu-bg-color: $ux-theme-2;
$node-vis-history-bg-color: null;
$node-vis-history-border-color: null;
$node-vis-history-filter: null;

$agent-config-inner-title-bg-color: $grey-1;

$matches-search-bg-color: $green;

$help-bg-color: rgb(223, 239, 251);
$help-icon-bg-color: rgb(12, 129, 238);
$help-tt-font-color: $font-color-blue-2;

$timeline-hilite-border: null;
$timetable-hilite-bg-color: color.adjust($ux-theme-0, $lightness: -15%);

$graph-hover-popup-bg-color: $ux-theme-0;
$graph-hover-popup-border: 1px solid rgb(204, 207, 219);
$graph-hover-popup-box-shadow: 0.5px 0.5px 2px rgb(204, 204, 204);

$dashlet-inner-bg-color: $ux-theme-1;

$bar-fill-color: rgba(0, 185, 255, 0.95);
$bar-hover-fill-color: rgba(0, 220, 255, 0.9);
$barbar-fill-color: rgba(25, 65, 100, 0.9);
$barbar-hover-fill-color: rgba(40, 75, 110, 0.9);

$dc-graph-color-0: rgb(25, 85, 140);
$scatterdot-hilite-color: rgb(0, 185, 255);

/* TODO:  move variables defined for the UX project to the correct place */
/* TODO:  adapt variables to modern theme */
$popup-shadow-color: rgba($white, 0.2);
$button-bg-color-default: $ux-theme-5;
$button-bg-color-suggestions: $ux-theme-4;
$navigation-bg-color: $ux-theme-2;
$page-menu-bg-color: $ux-theme-4;
$snapin-bg-color: $ux-theme-2;
$sidebar-border-color: rgba($grey-4, 0.2);
$popup-trigger-active-bg-color: $ux-theme-0;
$tactical-overview-td-bg-color: $ux-theme-5;
$server-time-div-bg-color: rgba($grey-4, 0.2);
$snapin-heading-border-color: rgba($grey-4, 0.2);
$simplebar-scrollbar-color: rgb(78, 93, 105);
$popup-border: $popup-border-width solid $success;
$popup-inner-border: 1px solid rgba(51, 51, 51, 0.2);
$filter-add-button-hover-brightness: brightness(0);
$floatfilter-legend-border: 1px solid rgba($black, 0.2);
$log-output-color: $ux-theme-0;
$dashlet-editor-controls-color: rgb(80, 88, 98);
$dark-image-invert: null;
$ntop-protocol-painter-padding-top: null;
// =============================
// The main dashboard shows the hosts and services stats dashlets right next to the total host and
// service problems graphs. Therefore, we should keep the colors in sync.
// metrics counterpart: cmk_hosts_down, cmk_services_critical
$hexagon-critical-color: $danger;
// metrics counterpart: cmk_hosts_unreachable, cmk_services_unknown
$hexagon-unknown-color: rgb(255, 136, 0);
// metrics counterpart: cmk_hosts_in_downtime, cmk_services_in_downtime
$hexagon-downtime-color: rgb(60, 194, 255);
// metrics counterpart: cmk_services_on_down_hosts
$hexagon-host-down-color: rgb(16, 99, 176);
// =============================
$hexagon-empty-color: $ux-theme-4;
$hexagon-empty-fill-opacity: 0.4;
$hexagon-empty-stroke-color: rgb(210, 212, 214);
$hexagon-empty-stroke-opacity: 1;
$host-hexagon-ok-stroke-color: $grey-2;
$bi-box-border-color: $grey-3;
$icons-popup-active-color: $darkgrey;
$dashlet-figures-grid-color: rgb(128, 151, 177);
$scatterplot-hilite-color: rgb(70, 130, 180);
$gauge-span-color: $ux-theme-5;
$gauge-single-value-color: $darkgrey;
$inactive-opacity: 0.7;
$svg-color-green-filter: invert(29%) sepia(70%) saturate(2002%) hue-rotate(138deg) brightness(95%)
  contrast(90%);
